import React from 'react'
import dayjs from 'dayjs'
import { Tag, List } from 'antd'

function PageHeader({ data = [], loading, onTodoComplete, onTodoDelete }) {
  const renderItem = (i) => {
    return (
      <List.Item>
        <div className="content">
          <div className="sort">{i.id}</div>
          <div className="text" style={{ textDecoration: i.complete ? 'line-through' : 'none' }}>{i.name} </div>
          <div className="time">{dayjs(i.key).format('YYYY-MM-DD HH:mm:ss')}</div>
        </div>
        <div className="option">
          {!i.complete && <Tag color="blue" onClick={_ => { onTodoComplete(i) }}>标记已完成</Tag>}
          <Tag color="red" onClick={_ => { onTodoDelete(i) }}>删除</Tag>
        </div>
      </List.Item>
    )
  }

  return (
    <List
      className="todo-main"
      size="large"
      bordered
      loading={loading}
      dataSource={data}
      renderItem={renderItem}
    />
  )
}

export default PageHeader
